<!-- 9. 通用组件-轮播图 -->
<script setup lang="ts">
import type { BannerItem } from '@/types/home' // 10.7同步
import { ref } from 'vue'

const activeIndex = ref(0) // 9.1 先定义一变量(待定)

// 9.end(需测试) 轮播图切换, 获取 "事件对象" 中不同轮播图的下标！！！
// 细节5: 因为, 项目自始至终都是基于 TS 进行的, 不指定ev的类型,
// 会被认为不安全, 不让获取其内部属性, 因此还需加上 "UniHelper" ==
const onChange: UniHelper.SwiperOnChange = (ev) => {
  // console.log(ev.detail?.current)

  // 细节6: 通过 "!"(非空断言), 主观上排除undefined的情况...
  activeIndex.value = ev.detail!.current
}

// 10.7 定义 props 接收:
// const props = defineProps<{
//   list: BannerItem[]
// }>()
// console.log(props)

// 细节11: Vue3 配合 TS 书写props写法
defineProps<{
  list: BannerItem[]
}>()
</script>

<template>
  <!-- 9.2 静态结构 -->
  <view class="carousel">
    <!-- 10.8 渲染轮播图数据到组件上 -->
    <swiper @change="onChange" :circular="true" :autoplay="false" :interval="3000">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 9.5 指示点 -->
    <view class="indicator">
      <!-- 10.end 指示点数目, 由轮播图数据list决定: -->
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 9.3(样式) 轮播图 */
.carousel {
  height: 280rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}
</style>
